﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no">
    <title>仰恩说</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- <link rel="stylesheet" href="dist/css/bootstrap.min.css">
    <script src="dist/js/jquery-2.1.4.min.js"></script>
    <script src="dist/js/jquery.cookie.js"></script>
    <script src="dist/js/bootstrap.min.js"></script> -->
    <style>
        body {
            padding-top: 80px;
        }
    </style>

    <script type="text/javascript">
		var xmlhttp;
		var topic = "";
		var topicLimit = 0;
		function createXMLHttpRequext() {
			if (window.ActiveXObject) {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			} else if (window.XMLHttpRequest) {
				xmlhttp = new XMLHttpRequest();
			}
		}
		// 获取说说
		function getTopic() {
			createXMLHttpRequext();
			xmlhttp.open("GET","GetTopic?topicLimit=" + topicLimit,true);
			//xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			xmlhttp.setRequestHeader("Content-Type", "text/html;charset=UTF-8");
			xmlhttp.onreadystatechange = returnTopic;
			xmlhttp.send(null);
		}
		function returnTopic() {
			if (xmlhttp.readyState == 4) {
				topic = topic + "\n" + xmlhttp.responseText;
				document.getElementById("topic").innerHTML = topic;
				topicLimit = topicLimit + 20;
			}
		}
		//发布说说
		function updateTopic(userNumber) {
			//var userNumber = document.getElementById("topicContent").value;
			if(userNumber == ""){
				alert("请登录后发布!");
				return;
			}
			var topicContent = document.getElementById("topicContent").value;
			if(topicContent == ""){
				alert("没有填写内容！");
				return;
			}
			createXMLHttpRequext();
			xmlhttp.open("POST","UpdateTopic",true);
			xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			//xmlhttp.setRequestHeader("Content-Type", "text/html;charset=UTF-8");
			xmlhttp.onreadystatechange = updateTopicCallback;
			xmlhttp.send("userNumber=" + userNumber+ "&topicContent=" + topicContent);
		}
		function updateTopicCallback() {
			if (xmlhttp.readyState == 4) {
				result = xmlhttp.responseText;
				if(result == "0"){//返回0表示登录成功
					document.getElementById("topicContent").value = "";
					topic = "";
					topicLimit = 0;
					getTopic()
				}else{
					alert(result);
				}
			}
		}

		//获取滚动条当前的位置
		function getScrollTop() {
			var scrollTop = 0;
			if (document.documentElement && document.documentElement.scrollTop) {
				scrollTop = document.documentElement.scrollTop;
			} else if (document.body) {
				scrollTop = document.body.scrollTop;
			}
			return scrollTop;
		}
		//获取当前可是范围的高度
		function getClientHeight() {
			var clientHeight = 0;
			if (document.body.clientHeight && document.documentElement.clientHeight) {
				clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
			} else {
				clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
			}
			return clientHeight;
		}
		//获取文档完整的高度
		function getScrollHeight() {
			return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
		}
		//滚动到底部时间处理
		window.onscroll = function() {
			if (getScrollTop() + getClientHeight() == getScrollHeight()) {
				//alert("到达底部");
				getTopic();
			}
		}

		// jQuery
		// 点赞说说
		function clickTopic(obj){
			if($.cookie("userNumber")==null){
        		alert("请登录后操作！");
        		return;
        	}
        	var Id = $(obj)[0].className.substring(2,$(obj)[0].className.length);
            $.post("ClickTopic",
                    {
                        topicId:Id
                    },
                    function(data,status){
                        if(data != "0"){
                        	alert(data);
                        	return;
                        }
                    });
          	//点赞成功，点赞数加1！
            $(obj).children("span").html(parseInt($(obj).children("span").html())+1);
            $(obj).css('color','#F05E1C');//点赞标签变橘黄色
            obj.onclick=null;//点赞标签变不可点击
		}
		// 评论说说
		function replyTopic(obj){
			if($.cookie("userNumber")==null){
        		alert("请登录后操作！");
        		return;
        	}
        	// 初始化数据
        	var number = $.cookie("userNumber");
        	var content = $(obj).parent().siblings("input").val();
        	var Id = $(obj).parent().siblings("p")[0].className.substring(2,$(obj)[0].className.length);
        	if(content == ""){
        		alert("请输入评论内容！");
        		return;
        	}
            $.post("ReplyTopic",
                    {
                        topicId:Id,
                        userNumber:number,
                        replyContent:content
                    },
                    function(data,status){
                        if(data != "0"){
                        	alert(data);
                        	return;
                        }else{
                        	// 评论完显示评论
                            $.post("GetReplyTopic",
                                    {
                                        topicId:Id
                                    },
                                    function(data,status){
                                        if(data == "0"){//点赞成功，点赞数加1！
                                        	alert("当前说说没有评论");
                                        	return;
                                        }else{
                                        	$(obj).parent().siblings("input").val("");
                                        	$(obj).parent().parent().siblings("span").html(data);
                                        }
                                    });
                          	//说说加1
                            $(obj).parent().parent().siblings("p#showReply").children("span").html(parseInt($(obj).parent().parent().siblings("p#showReply").children("span").html())+1);
                        }
                    });
		}
		// 显示评论
		function showReply(obj){
			//$(".panel").slideDown("slow");
			var Id = $(obj)[0].className.substring(2,$(obj)[0].className.length);
            $.post("GetReplyTopic",
                    {
                        topicId:Id
                    },
                    function(data,status){
                        if(data == "0"){//点赞成功，点赞数加1！
                        	alert("当前说说没有评论");
                        	return;
                        }else{
                        	$(obj).siblings("span").html(data);
                        }
                    });
		}
	</script>
</head>
<body onload="getTopic()">
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                                data-target="#example-navbar-collapse">
                            <span class="sr-only">切换导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <img alt="140x140" src="images/favicon.ico" class="img-circle" width=22px
                             style="float: left;margin-top: 13px"/>
                        <p class="navbar-brand">仰恩社区</p>
                    </div>
                    <div class="collapse navbar-collapse navbar-responsive-collapse"
                         id="example-navbar-collapse">
                        <div class="col-xs-6" style="margin-top: 10px;margin-left: 50px">
                            <ul class="nav nav-pills nav-justified" style="margin-right: 50px">
                                <li class="active" ><a href="Index"><strong>校园动态</strong></a></li>
                                <li ><a href="news.html"><strong>校园新闻</strong></a></li>
                                <li><a href="campusbrows.html"><strong>校园浏览</strong></a></li>
                                <li><a href="campusview.html"><strong>校园风采</strong></a></li>
                                <li><a href="personal.html"><strong>我的心愿墙</strong></a></li>
                                <li><a href="aboutours.html"><strong>关于网站</strong></a></li>
                            </ul>
                        </div>
                        <div style="margin-top: 3px;float: right">
                            <ul class="nav navbar-nav navbar-right">
                            	${loginState}
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </div>

    <div class="row clearfix">
        <div class="col-md-3 column">
            <div class="col-xs-12 column">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <p class="text-center"><img alt="140x140" src="userHead/${userHead}.jpg"
                                                    class="img-circle" width=100px/></p>
                        <p class="text-center h4"><span class="glyphicon glyphicon-user"></span><a
                                href="" style="text-decoration:none;">${userName}</a></p>

                    </div>
                </div>

                <div class="panel panel-info  hidden-xs" >
                    <div class="panel-heading">
                        <h3 class="panel-title"><span class="glyphicon glyphicon-send"></span> 个人资料
                            <!-- 按钮触发模态框 -->
                            <button class="btn btn-info btn-xs" data-toggle="modal"
                                    data-target="#myModal" style="float: right"><span
                                    class="glyphicon glyphicon-edit"></span>
                            </button>
                            <!-- 模态框（Modal） -->
                            <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
                                 aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal"
                                                    aria-hidden="true">&times;</button>
                                            <h4 class="modal-title" id="myModalLabel">
                                                <span class="glyphicon glyphicon-pencil"></span>
                                                资料编辑</h4>
                                        </div>
                                        <div class="modal-body">
                                            <form class="form-horizontal" role="form" action="UpdataUserInfo" method="post">
                                            	<div class="form-group">
                                                    <label for="userAge"
                                                           class="col-sm-2 control-label">昵称：</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-control"
                                                               id="userAge" placeholder="请输入昵称" name="userName">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="userAge"
                                                           class="col-sm-2 control-label">年龄：</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-control"
                                                               id="userAge" placeholder="请输入年龄" name="userAge">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="userSex"
                                                           class="col-sm-2 control-label">性别：</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-control"
                                                               id="userSex" placeholder="请输入性别" name="userSex">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="userBirthday"
                                                           class="col-sm-2 control-label">生日：</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-control"
                                                               id="userBirthday"
                                                               placeholder="请输入生日" name="userBirthday">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="userQQ"
                                                           class="col-sm-2 control-label">Q
                                                        Q：</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-control"
                                                               id="userQQ" placeholder="请输入QQ号" name="userQQ">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="userEmail"
                                                           class="col-sm-2 control-label">邮箱：</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-control"
                                                               id="userEmail" placeholder="请输入邮箱" name="userEmail">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="homeAddress"
                                                           class="col-sm-2 control-label">故乡：</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-control"
                                                               id="homeAddress" placeholder="请输入故乡" name="homeAddress">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="introduction"
                                                           class="col-sm-2 control-label">说明：</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-control"
                                                               id="introduction"
                                                               placeholder="设置你的个性签名..." name="introduction">
                                                    </div>
                                                </div>

                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default"
                                                            data-dismiss="modal">关闭
                                                    </button>
                                                    <button type="submit" class="btn btn-primary">
                                                        提交更改
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div><!-- /.modal-content -->
                                </div><!-- /.modal -->
                            </div>
                        </h3>
                    </div>
                    <ul class="list-group">
                        <li class="list-group-item">学号：${userNumber}</li>
                        <li class="list-group-item">年龄：${userAge}</li>
                        <li class="list-group-item">性别：${userSex}</li>
                        <li class="list-group-item">生日：${userBirthday}</li>
                        <li class="list-group-item">Q Q：${userQQ}</li>
                        <li class="list-group-item">邮箱：${userEmail}</li>
                        <li class="list-group-item">故乡：${homeAddress}</li>
                        <li class="list-group-item">说明：${introduction}</li>


                    </ul>
                </div>


                <div class="panel panel-info  hidden-xs">
                    <div class="panel-heading">
                        <h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span>
                            学院分布</h3>
                    </div>
                    <a href="#" class="list-group-item"><span
                            class="glyphicon glyphicon-hand-right"></span> 工程技术学院</a>
                    <a href="#" class="list-group-item"><span
                            class="glyphicon glyphicon-hand-right"></span> 管理学院</a>
                    <a href="#" class="list-group-item"><span
                            class="glyphicon glyphicon-hand-right"></span> 人文学院</a>
                    <a href="#" class="list-group-item"><span
                            class="glyphicon glyphicon-hand-right"></span> 经济学院</a>
                    <a href="#" class="list-group-item"><span
                            class="glyphicon glyphicon-hand-right"></span> 政治学院</a>
                    <a href="#" class="list-group-item"><span
                            class="glyphicon glyphicon-hand-right"></span> 外国语学院</a>
                </div>
            </div>
        </div>
        <div class="col-md-6 column ">
            <div class="col-xs-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div id="myCarousel" class="carousel slide">
                            <ol class="carousel-indicators">
                                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                <li data-target="#myCarousel" data-slide-to="1"></li>
                                <li data-target="#myCarousel" data-slide-to="2"></li>
                            </ol>
                            <div class="carousel-inner">
                                <div class="item active">
                                    <img src="images/lunbo1.jpg" alt="First slide" width="100%">
                                </div>
                                <div class="item">
                                    <img src="images/lunbo2.jpg" alt="Second slide" width="100%">
                                </div>
                                <div class="item">
                                    <img src="images/lunbo3.jpg" alt="Third slide" width="100%">
                                </div>
                            </div>
                            <a class="carousel-control left" href="#myCarousel"
                               data-slide="prev">&lsaquo;
                            </a>
                            <a class="carousel-control right" href="#myCarousel"
                               data-slide="next">&rsaquo;
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <form role="form">
                            <div class="form-group">
                                <textarea class="form-control" rows="3" placeholder="说点什么吧......" id="topicContent"></textarea><br>
                                <button type="button" class="btn btn-primary btn-sm" type="submit" onclick="updateTopic('${userNumber}')"

                                        style="float: right"><span
                                        class="glyphicon glyphicon-edit"></span> 发布
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                <ul class="list-group">
                	<span id="topic"></span>
                    <li class="panel panel-default" style="list-style-type:none">
                        <div class="panel-body">
                            <img src="images/59.jpg" class="img-circle" width="50px" style="float: left"/>
                            <div style="float: left;margin-left: 10px">
                                <p class="h4" style="margin-top: 5px">巴黎左岸</p>
                                <p class="h6">10月23日 10:52</p>
                            </div>
                            <div class=" clearfix"></div>
                            <p style="margin-top: 15px"> 愿得一人心，白首不分离。愿得一人心，白首不分离。愿得一人心，白首不分离。愿得一人心，白首不分离。</p>
                            <p id="click" onclick="clickTopic(this)" class="id51" style="cursor: pointer;float:right;text-decoration:none;margin-right: 15px"><i class="glyphicon glyphicon-thumbs-up"></i>&nbsp点赞&nbsp<span>23</span></p>
							<p id="showReply" onclick="showReply(this)" class="id51" style="cursor: pointer;float:right;text-decoration:none;margin-right: 20px"><i class="glyphicon glyphicon-comment"></i>&nbsp评论&nbsp<span>23</span></p>
                            <div class=" clearfix"></div>
                            <div class="input-group" style="margin-top: 10px">
                                <input type="text" class="form-control" id="replyContent">
                                <span class="input-group-btn"><button class="btn btn-default" id="reply"  onclick="replyTopic(this)">评论</button></span>
                                <p class="id51"></p>
                            </div>
                            <span class="panel"></span>
                        </div>
                    </li>
                    <li class="panel panel-default" style="list-style-type:none">
                        <div class="panel-body">
                            <img src="images/59.jpg" class="img-circle" width="50px" style="float: left"/>
                            <div style="float: left;margin-left: 10px">
                                <p class="h4" style="margin-top: 5px">巴黎左岸</p>
                                <p class="h6">10月23日 10:52</p>
                            </div>
                            <div class=" clearfix"></div>
                            <p style="margin-top: 15px"> 愿得一人心，白首不分离。愿得一人心，白首不分离。愿得一人心，白首不分离。愿得一人心，白首不分离。</p>
                            <p id="click" onclick="clickTopic(this)" class="id47" style="cursor: pointer;float:right;text-decoration:none;margin-right: 15px"><i class="glyphicon glyphicon-thumbs-up"></i>&nbsp点赞&nbsp<span>23</span></p>
							<p id="showReply" onclick="showReply(this)" class="id47" style="cursor: pointer;float:right;text-decoration:none;margin-right: 20px"><i class="glyphicon glyphicon-comment"></i>&nbsp评论&nbsp<span>23</span></p>
                            <div class=" clearfix"></div>
                            <div class="input-group" style="margin-top: 10px">
                                <input type="text" class="form-control" id="replyContent">
                                <span class="input-group-btn"><button class="btn btn-default" id="reply" onclick="replyTopic(this)">评论</button></span>
                                <p class="id47"></p>
                            </div>
                            <span></span>
                            <hr>
                            <div style="margin-left: 15px">
                                <img src="images/59.jpg" class="img-circle" width="30px" style="float: left"/>
                                <div style="float: left;margin-left: 10px">
                                    <p class="h6" style="margin-top: 0" style="color:#EE781F">巴黎左岸</p>
                                    <p class="h6" style="color:#EE781F">10月23日 10:52</p>
                                </div>
                                <div class=" clearfix"></div>
                                <p class="h5" style="margin-top: 5px;margin-left: 40px"> 愿得一人心，白首不分离。愿得一人心，白首不分离。愿得一人心，白首不分离。愿得一人心，白首不分离。</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-md-3 column hidden-xs">
            <div class="col-xs-12">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <!--<iframe frameborder="no" border="0" marginwidth="0" marginheight="0"
                                width="100%" height="86px"
                                src="http://music.163.com/outchain/player?type=2&id=26305922&auto=1&height=66"></iframe>-->
                        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0"
                                width="100%" height=86
                                src="http://music.163.com/outchain/player?type=2&id=5267256&auto=1&height=66"></iframe>
                    </div>
                </div>
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title"><span class="glyphicon glyphicon-list-alt"></span>
                            新闻列表</h3>
                    </div>
                    <ul class="list-group">
                        <li class="list-group-item"><a href="" style="text-decoration:none"><span
                                class="glyphicon glyphicon-chevron-right"></span>关于举办数字化教室使用培训</a>
                        </li>
                        <li class="list-group-item"><a href="" style="text-decoration:none"><span
                                class="glyphicon glyphicon-chevron-right"></span> 关于组织中青年教师报名参加</a>
                        </li>
                        <li class="list-group-item"><a href="" style="text-decoration:none"><span
                                class="glyphicon glyphicon-chevron-right"></span> 关于全校启用金穗银校一卡通</a>
                        </li>
                        <li class="list-group-item"><a href="" style="text-decoration:none"><span
                                class="glyphicon glyphicon-chevron-right"></span> 校园卡圈存操作流程</a></li>
                        <li class="list-group-item"><a href="" style="text-decoration:none"><span
                                class="glyphicon glyphicon-chevron-right"></span> 关于开展仰恩大学阳光体育活</a>
                        </li>
                        <li class="list-group-item"><a href="" style="text-decoration:none"><span
                                class="glyphicon glyphicon-chevron-right"></span> 2013学年仰恩大学信息公开</a>
                        </li>
                        <li class="list-group-item"><a href="" style="text-decoration:none"><span
                                class="glyphicon glyphicon-chevron-right"></span> 仰恩大学第二十二届运动会</a>
                        </li>
                        <li class="list-group-item"><a href="" style="text-decoration:none"><span
                                class="glyphicon glyphicon-chevron-right"></span> 冬季赴美游学报名通知</a>
                        </li>
                    </ul>
                </div>
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title"><span class="glyphicon glyphicon-picture"></span>
                            校园风采</h3>
                    </div>
                    <ul class="list-group">
                        <li class="list-group-item"><p class="text-center"><a href="#"
                                                                              style="text-decoration: none"><img
                                alt="140x140" class="img-thumbnail" src="images/pic1.jpg"/>三棵球</a>
                        </p>
                        </li>
                        <li class="list-group-item"><p class="text-center"><a href="#"
                                                                              style="text-decoration: none"><img
                                alt="140x140" class="img-thumbnail" src="images/pic2.jpg"/>学校正门</a>
                        </p>
                        </li>
                        <li class="list-group-item"><p class="text-center"><a href="#"
                                                                              style="text-decoration: none"><img
                                alt="140x140" class="img-thumbnail" src="images/pic3.jpg"/>新区操场</a>
                        </p>
                        </li>
                        <li class="list-group-item"><p class="text-center"><a href="#"
                                                                              style="text-decoration: none"><img
                                alt="140x140" class="img-thumbnail" src="images/pic4.jpg"/>仰光楼</a>
                        </p>
                        </li>
                        <li class="list-group-item"><p class="text-center"><a href="#"
                                                                              style="text-decoration: none"><img
                                alt="140x140" class="img-thumbnail" src="images/pic5.jpg"/>女生宿舍</a>
                        </p>
                        </li>
                        <li class="list-group-item"><p class="text-center"><a href="#"
                                                                              style="text-decoration: none"><img
                                alt="140x140" class="img-thumbnail" src="images/pic6.jpg"/>足球场</a>
                        </p>
                        </li>
                        <li class="list-group-item"><p class="text-center"><a href="#"
                                                                              style="text-decoration: none"><img
                                alt="140x140" class="img-thumbnail" src="images/pic7.jpg"/>彩虹桥</a>
                        </p>
                        </li>
                        <li class="list-group-item"><p class="text-center"><a href="#"
                                                                              style="text-decoration: none"><img
                                alt="140x140" class="img-thumbnail" src="images/pic8.jpg"/>共和楼</a>
                        </p>
                        </li>
                        <li class="list-group-item"><p class="text-center"><a href="#"
                                                                              style="text-decoration: none"><img
                                alt="140x140" class="img-thumbnail" src="images/pic9.jpg"/>彩虹桥花草</a>
                        </p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>